'use client'

import { useState } from 'react'

const products = [
  {
    id: 'training',
    title: '全年深度陪跑服务',
    subtitle: 'Annual Deep Training Service',
    description: '从策略制定到执行落地，全年无间断专业陪跑服务',
    features: ['策略规划', '团队培训', '执行指导', '效果跟踪'],
    cases: [
      { brand: 'SCHENDER', result: '5年深度合作，销售增长300%' },
      { brand: '玛缇瓷磗', result: '50000+终端覆盖，品牌知名度大幅提升' }
    ]
  },
  {
    id: 'system',
    title: '智能业务系统',
    subtitle: 'Intelligent Business System',
    description: 'AI驱动的全链路业务管理系统，提升运营效率',
    features: ['客户管理', '订单处理', '库存优化', '数据分析'],
    cases: []
  },
  {
    id: 'ai-agent',
    title: '行业智能体',
    subtitle: 'Industry AI Agent',
    description: '专为大家居行业定制的AI智能助手，24/7在线服务',
    features: ['智能客服', '营销助手', '数据洞察', '决策支持'],
    cases: []
  },
  {
    id: 'website',
    title: '智能建站服务',
    subtitle: 'Intelligent Website Building',
    description: '一站式建站解决方案，快速搭建专业企业官网',
    features: ['模板定制', '响应式设计', 'SEO优化', '数据统计'],
    cases: []
  },
  {
    id: 'resources',
    title: '严选资源平台',
    subtitle: 'Curated Resources Platform',
    description: '精选行业优质资源，为企业提供一站式服务支持',
    features: ['供应商网络', '服务商推荐', '质量把控', '价格优势'],
    cases: []
  }
]

export default function ProductsSection() {
  const [activeProduct, setActiveProduct] = useState('training')

  const activeProductData = products.find(p => p.id === activeProduct)

  return (
    <section id="products" className="py-20 bg-gray-50 dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-6">
        {/* 标题 */}
        <div className="text-center mb-16">
          <h2 className="text-5xl md:text-6xl font-black text-black dark:text-white mb-6">
            蜜多云科技全链路产品矩阵
          </h2>
          <p className="text-2xl font-medium text-gray-600 dark:text-gray-400 mb-8">
            1个AI智能驱动底座 + N个应用场景
          </p>
          
          {/* AI底座可视化 */}
          <div className="relative max-w-4xl mx-auto mb-12">
            <div className="text-center">
              <div className="inline-block neo-brutal-card p-8 bg-blue-600 text-white">
                <div className="text-3xl font-black mb-2">AI智能驱动底座</div>
                <div className="font-mono text-sm">CORE_AI_ENGINE</div>
              </div>
              
              {/* 连接线 */}
              <div className="flex justify-center mt-8 space-x-8">
                {products.map((product, index) => (
                  <div key={product.id} className="flex flex-col items-center">
                    <div className="w-px h-12 bg-gray-400"></div>
                    <div className="w-4 h-4 bg-green-400 rounded-full"></div>
                    <div className="w-px h-4 bg-gray-400"></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 产品选项卡 */}
        <div className="flex flex-wrap justify-center gap-4 mb-12">
          {products.map((product) => (
            <button
              key={product.id}
              onClick={() => setActiveProduct(product.id)}
              className={`
                px-6 py-3 font-bold text-lg border-2 transition-all duration-200
                ${activeProduct === product.id 
                  ? 'bg-blue-600 text-white border-black shadow-[4px_4px_0px_black]' 
                  : 'bg-white text-black border-black hover:shadow-[2px_2px_0px_black]'
                }
              `}
              data-cursor-text="expand"
            >
              {product.title}
            </button>
          ))}
        </div>

        {/* 产品详情 */}
        {activeProductData && (
          <div className="neo-brutal-card p-8 max-w-5xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* 左侧：产品信息 */}
              <div>
                <h3 className="text-4xl font-black text-black dark:text-white mb-2">
                  {activeProductData.title}
                </h3>
                <p className="font-mono text-blue-600 mb-6 tracking-wider">
                  {activeProductData.subtitle}
                </p>
                <p className="text-lg text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
                  {activeProductData.description}
                </p>
                
                {/* 功能特色 */}
                <div>
                  <h4 className="text-xl font-bold text-black dark:text-white mb-4">核心功能</h4>
                  <div className="grid grid-cols-2 gap-2">
                    {activeProductData.features.map((feature, index) => (
                      <div key={index} className="flex items-center space-x-2">
                        <div className="w-2 h-2 bg-green-400"></div>
                        <span className="text-sm font-medium">{feature}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
              
              {/* 右侧：案例展示 */}
              <div>
                {activeProductData.cases.length > 0 ? (
                  <div>
                    <h4 className="text-xl font-bold text-black dark:text-white mb-6">成功案例</h4>
                    {activeProductData.cases.map((case_, index) => (
                      <div key={index} className="border-l-4 border-green-400 pl-4 mb-6">
                        <div className="font-bold text-lg text-blue-600 mb-2">{case_.brand}</div>
                        <p className="text-gray-600 dark:text-gray-400">{case_.result}</p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="flex items-center justify-center h-full">
                    <div className="text-center">
                      <div className="text-6xl mb-4">🚀</div>
                      <p className="text-xl font-medium text-gray-500">更多案例正在路上...</p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  )
} 